<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>React 学习！！</title>
</head>
<body>
<div id="app"></div>
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../bower_components/react/browser.min.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/babel">
    var $ = (function(){
       var ajax=function(url,callback){
            var xhr=new XMLHttpRequest();
            xhr.open("GET",url,true);
            xhr.send("");
            xhr.onreadystatechange=function(){
              if(xhr.readyState==4&&xhr.status==200){
                    callback(JSON.parse(xhr.responseText));
              }
            }
       }
       return {
         http:ajax    
        }

    })();

    //1.数据如何去获取  http ajax
    //2.数据获取以后 如何绑定到页面中 
    //3.first  ------jsx
     
    var styles={
       div:{
          width:'100%',
          minHeight:'20rem',
          overflow:'hidden'
       },
       cxt:{
          width:'100%',
          height:'5rem',
          borderBottom:'1px solid #acacac',
          display:'flex',justifyContent:'space-around',
          alignItems:'center'
       },
       img:{
          width:"4rem",height:'4rem'
       },
       span:{
         fontSize:'1.2rem'
       }
    }

    var ListView=React.createClass({
        //2.1 设置组件数据源 请求地址
        getDefaultProps:function(){
           return{
             url:'http://127.0.0.1:3000/query'
           }
        },
        //2.2 设置默认状态 得到数据放在状态里面 
        getInitialState:function(){
            return{
              result:''
            }
        },

        // 1.核心一步 确定页面中哪段jsx控制数据渲染的模板
        // 找到渲染模板 通过循环曲叠加次数 将次数嵌套在页面中
        // 2.何时得到数据
        // 3.何时发送请求得到数据  
        
        componentWillMount:function(){
           console.log("this is will mount");
           var _this=this;
           $.http(this.props.url,function(data){
                //console.log(data);
                _this.setState({result:data});
           });
        },
        render:function(){
           var jsx=[];//react 解析 数组

           console.log(this.state.result);
           var _result=this.state.result.result;
           if(_result){
	           for(var i=0;i<_result.length;i++){
	              jsx.push(<div style={styles.cxt}>
	              		<img src={_result[i].goodsImg} style={styles.img}/>
	                    <span style={styles.span}>
	                    	{_result[i].goodsName}
	                    </span>
	              	</div>); 
	           }
           }
           
           return(
              <div style={styles.div}>
              	{jsx}
              </div>
           );
        }
    });

   ReactDOM.render(<ListView/>,document.getElementById('app'));
    
   //1.确定 页面中哪个是渲染数据模版  
   //2.在组件加载之前得到数据 存在state里面
   //3.循环得到模板jsx再数据通过state绑定进去

   // 父子组件嵌套方式 
   //1.让父组件 去获取数据
   //2.让子组件只是渲染数据模版
   //3.都需要在父组件循环子组件叠加到全局数组里面 数组嵌套在页面

    
</script>
</html>